<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  // const userCodeStore = useUsercodeStore()

  const goodid = ref()
  // 轮播图
  const info = ref([])
  // 处理手机
  function maskPhoneNumber(phoneNumber) {
    const start = phoneNumber.slice(0, 3)
    const end = phoneNumber.slice(-4)
    return start + '****' + end
  }
  // 处理富文本
  function replaceWhite(html) {
    // 使用 replace 方法替换匹配的部分为空字符串
    let newContent = html.replace(/style="[^"]*"/g, '')
    newContent = newContent.replace(
      /style="[^"]+"/gi,
      function (match, capture) {
        match = match
          .replace(/width:[^;]+;/gi, 'max-width:100%;')
          .replace(/width:[^;]+;/gi, 'max-width:100%;')
        return match
      }
    )
    newContent = newContent.replace(/<br[^>]*\/>/gi, '')
    newContent = newContent.replace(
      /\<img/gi,
      '<img style="max-width:100%;height:auto;display:block;margin:0;"'
    )
    return newContent
  }

  const goodsDetail = ref('')

  async function getDetail(id) {
    const res = await http.request({
      url: '/api/goods/goodsDetails',
      method: 'POST',
      data: {
        id: id,
      },
    })
    info.value = []
    if (res.data.imgs.length == 0) {
      info.value.push({ content: 'undefine', img: res.data.img })
    } else {
      res.data.imgs.forEach((item) => {
        info.value.push({ content: 'undefine', img: item })
      })
    }
    if (res.data.address_info) {
      res.data.address_info.mobile = maskPhoneNumber(
        res.data.address_info.mobile
      )
    }

    res.data.details = replaceWhite(res.data.details)
    goodsDetail.value = res.data
  }
  async function hope(id) {
    const res = await http.request({
      url: '/api/goods/scPost',
      method: 'POST',
      data: {
        id: id,
        type: '1',
      },
    })
    if (res.st == 1) {
      if (goodsDetail.value.is_sc == 1) {
        goodsDetail.value.is_sc = 0
      } else if (goodsDetail.value.is_sc == 0) {
        goodsDetail.value.is_sc = 1
      }
      uni.showToast({
        title: '操作成功',
        duration: 2000,
      })
    } else {
      uni.showToast({
        title: '操作失败',
        icon: 'error',
        duration: 2000,
      })
    }
  }

  const modeIndex = ref(3)
  const styleIndex = ref(-1)
  const dotsStyles = ref({
    backgroundColor: 'transparent',
    border: 'none',
    color: '#fff',
    selectedBackgroundColor: '#000',
    selectedBorder: 'none',
    width: '3',
    height: '3',
  })
  const swiperDotIndex = ref(0)
  const current = ref(0)
  const mode = ref('nav')

  function change(e) {
    current.value = e.detail.current
  }
  function clickItem(e) {
    swiperDotIndex.value = e
  }
  function onBanner(index) {
    console.log(22222, index)
  }

  // 购买弹窗
  const buypopup = ref()
  function buyPop() {
    const userCodeStore = useUsercodeStore()
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }
    if (
      userCodeStore.usercode.isAddress == 0 &&
      userCodeStore.usercode.token != ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先完善物流信息')
      setTimeout(() => {
        uni.navigateTo({
          url: `/minePage/editaddress/index`,
        })
      }, 2000)
      return
    }
    buypopup.value.open('bottom')
  }
  const num = ref(1)
  function changenum(e) {
    // num.value = e
    // console.log(num.value)
  }
  function goOrder() {
    console.log(num.value)
    if (num.value <= 0) {
      uni.showToast({
        title: '购买数量不可以小于0',
        icon: 'error',
        duration: 2000,
      })
      num.value = 1
      return
    } else if (
      goodsDetail.value.kc == 0 ||
      Number(goodsDetail.value.kc) < num.value
    ) {
      uni.utils.toast('库存不足')
      return
    }
    uni.navigateTo({
      url: `/homePage/order/index?buynum=${num.value}&id=${
        goodsDetail.value.id
      }&totalPrice=${(
        Number(num.value) * Number(goodsDetail.value.price)
      ).toFixed(2)}&integral=${goodsDetail.value.is_integral}&totalIntegral=${(
        Number(num.value) * Number(goodsDetail.value.integral)
      ).toFixed(2)}&buyintegral=${goodsDetail.value.integral}`,
    })
    buypopup.value.close('bottom')
  }

  // 心愿单
  function checkHope() {
    uni.navigateTo({
      url: `/minePage/hopelist/index`,
    })
  }

  // 联系客服
  const servicepopup = ref()
  function service() {
    servicepopup.value.open('center')
  }

  function scan(url) {
    uni.previewImage({
      urls: [url],
      longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: (res) => {},
        fail: (res) => {
          console.log(res.errMsg)
        },
      },
    })
  }

  //隐藏接口
  const hidding = ref(true)
  function hidePart() {
    const userCodeStore = useUsercodeStore()
    if (userCodeStore.usercode.mobile == '18254076917') {
      hidding.value = false
    } else {
      hidding.value = true
    }
  }

  onShareAppMessage(() => {
    const userCodeStore = useUsercodeStore()
    const user = userCodeStore.usercode.user
    return {
      title: '快来帮我看看我挑中的商品',
      path: `/pages/home/index?pid=${user}`,
    }
  })
  onLoad((option) => {
    goodid.value = option.id
  })
  onShow(() => {
    hidePart()
    getDetail(goodid.value)
  })
</script>

<template>
  <view class="content">
    <!-- 轮播图 -->
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      @clickItem="clickItem"
      :info="info"
      :current="current"
      :mode="mode"
      :dots-styles="dotsStyles"
      field="content"
    >
      <swiper @change="change" class="swiper-box" :current="swiperDotIndex">
        <swiper-item v-for="(item, index) in info" :key="index">
          <view class="swiper-item" :class="'swiper-item' + index">
            <!-- <text style="color: #fff; font-size: 32px">{{
							index + 1
						}}</text> -->
            <image style="width: 100%; height: 750rpx" :src="item.img"></image>
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 价格详情 -->
    <view class="price-detail">
      <view class="price">
        <image
          v-if="goodsDetail.is_integral == 1"
          style="width: 44rpx; height: 44rpx; margin-right: 10rpx"
          src="../../static/icon.png"
          mode=""
        ></image>
        <text v-else style="font-size: 34rpx; color: #f75b5b">￥</text>
        <text
          v-if="goodsDetail.is_integral == 1"
          style="font-size: 54rpx; color: #f75b5b"
          >{{ goodsDetail.integral }}</text
        >
        <text v-else style="font-size: 54rpx; color: #f75b5b">{{
          goodsDetail.price
        }}</text>
      </view>
      <view class="name">
        <!-- <view class="nameinfo"> -->
        <text class="goods_name">{{ goodsDetail.goods_name }}</text>
        <!-- </view> -->
        <view class="love" @click="hope(goodsDetail.id)">
          <uni-icons
            :type="goodsDetail.is_sc == 0 ? 'heart' : 'heart-filled'"
            :color="goodsDetail.is_sc == 1 ? '#EC5050' : ''"
            size="22"
          ></uni-icons>
          <text style="font-size: 20rpx">收藏</text>
        </view>
      </view>
      <view class="detail">
        <text>运费:{{ goodsDetail.is_by == 1 ? '包邮' : '不包邮' }}</text>
        <text>销量:{{ goodsDetail.sell_num }}</text>
        <text>库存:{{ goodsDetail.kc }}</text>
      </view>
    </view>

    <!-- 规格地址 -->
    <view class="specadd">
      <view class="spec">
        <text style="font-size: 28rpx">规格</text>
        <text style="font-size: 24rpx; color: #b1b0b8">{{
          goodsDetail.spec
        }}</text>
      </view>
      <view class="address" @click="addressPop">
        <text>配送</text>
        <view class="addinfo">
          <view class="info" v-if="goodsDetail.address_info">
            <text style="font-size: 24rpx">{{
              goodsDetail.address_info.province +
              goodsDetail.address_info.city +
              goodsDetail.address_info.area
            }}</text>
            <text class="address-center">{{
              goodsDetail.address_info.address
            }}</text>
            <view style="font-size: 24rpx; color: #3d3d3d"
              >{{
                goodsDetail.address_info.name
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<text
                style="font-size: 22rpx; color: #898989"
                >{{ goodsDetail.address_info.mobile }}</text
              ></view
            >
          </view>
          <view class="info" v-else>
            <text class="address-center"> 请先完善物流信息 </text>
          </view>
          <!-- <view class="aim"> </view> -->
        </view>
      </view>
    </view>
    <view
      class="goodinfo"
      style="
        text-align: center;
        font-size: 28rpx;
        color: #3d3d3d;
        margin: 18rpx 0;
      "
      >商品详情</view
    >

    <rich-text :nodes="goodsDetail.details"></rich-text>
    <!-- 底部固定部分 -->
    <view class="bottom">
      <view class="bottom-left">
        <!-- <view class="warehouse">
					<image
						style="width: 46rpx; height: 46rpx"
						src="../../static/warehouse.png"
						mode=""
					></image>
					<text style="font-size: 20rpx; color: #3d3d3d">背包</text>
				</view> -->
        <view class="service" v-if="hidding" @click="service">
          <image
            style="width: 38rpx; height: 38rpx; padding: 4rpx"
            src="../../static/service.png"
            mode=""
          ></image>
          <text style="font-size: 20rpx; color: #3d3d3d">客服</text>
        </view>
      </view>
      <view class="bottom-right">
        <button class="xinyuan" type="primary" @click="checkHope">
          去心愿单
        </button>
        <button
          type="primary"
          plain="true"
          disabled="true"
          v-if="goodsDetail.is_ys == 1"
        >
          正在预售
        </button>
        <button class="buy" type="primary" plain="true" @click="buyPop" v-else>
          立即购买
        </button>
      </view>
    </view>

    <!-- 购买弹出框 -->
    <uni-popup ref="buypopup" type="bottom">
      <view class="buypopup-content">
        <view class="top">
          <image
            style="width: 180rpx; height: 180rpx; border-radius: 20rpx"
            :src="goodsDetail.img"
            mode=""
          ></image>
          <view class="info">
            <view class="price">
              <image
                v-if="goodsDetail.is_integral == 1"
                style="width: 44rpx; height: 44rpx; margin-right: 10rpx"
                src="../../static/icon.png"
                mode=""
              ></image>
              <text v-else style="font-size: 34rpx; color: #f75b5b">￥</text>
              <text
                v-if="goodsDetail.is_integral == 1"
                style="font-size: 54rpx; color: #f75b5b"
                >{{ goodsDetail.integral }}</text
              >
              <text v-else style="font-size: 54rpx; color: #f75b5b">{{
                goodsDetail.price
              }}</text>
            </view>
            <view class="detail">
              <text style="margin-left: 7rpx; font-size: 24rpx; color: #898989"
                >已选</text
              >
              <text
                style="margin-left: 20rpx; font-size: 24rpx; color: #3d3d3d"
                >{{ goodsDetail.spec }}</text
              >
            </view>
          </view>
        </view>
        <view class="center">
          <text style="font-size: 24rpx; color: #3d3d3d">数量</text>
          <uni-number-box :min="1" :max="1" v-model="num"></uni-number-box>
          <!-- @change="changenum" -->
        </view>
        <view style="text-align: left; font-size: 24rpx; color: #bbbbbb">
          仅支持发货不支持退回
        </view>
        <button
          type="primary"
          @click="goOrder"
          style="
            color: #3d3d3d;
            font-weight: 600;
            border: 1rpx solid $all-color;
          "
        >
          确认
        </button>
      </view>
    </uni-popup>

    <!-- 客服弹出层 -->
    <uni-popup ref="servicepopup" type="center">
      <view class="servicepopup-content">
        <image
          @longpress="
            scan('https://ojqn.wm2177.com/wechat_imgs/mine/service.png')
          "
          src="https://ojqn.wm2177.com/wechat_imgs/mine/service.png"
          style="width: 100%; height: 100%"
          mode=""
        ></image>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .content {
    padding-bottom: 170rpx;
    background-color: #f4f4f4;
    .uni-swiper-dot-box {
      width: 100%;
    }
    .swiper-box {
      height: 750rpx;
    }

    .swiper-item {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 750rpx;
      color: #fff;
      background-color: #fff;
    }

    // .swiper-item0 {
    // 	background-color: #cee1fd;
    // }

    // .swiper-item1 {
    // 	background-color: #b2cef7;
    // }

    // .swiper-item2 {
    // 	background-color: #cee1fd;
    // }
    ::v-deep .uni-swiper__dots-nav-item {
      position: absolute;
      right: -132rpx;
      font-size: 24rpx;
      margin: 0 31rpx !important;
    }

    .price-detail {
      // width: 100%;
      height: 328rpx;
      margin: 22rpx;
      padding: 24rpx;
      border-radius: 20rpx;
      background-color: #fff;
      box-sizing: border-box;
      .name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 16rpx 0 36rpx 0;
        border-bottom: 1px solid #f5f5f5;
        .goods_name {
          display: block;
          width: 90%;
          margin-right: 22rpx;
          font-size: 30rpx;
          box-sizing: border-box;
          font-weight: 600;
          color: #3d3d3d;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 限制为两行 */
          -webkit-box-orient: vertical;
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 超出部分用省略号表示 */
          white-space: normal; /* 允许换行 */
          /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
        }
        .love {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
      .detail {
        margin-top: 34rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #b1b0b8;
      }
    }
    .specadd {
      height: 250rpx;
      margin: 0 22rpx 22rpx;
      padding: 22rpx;
      border-radius: 20rpx;
      background-color: #fff;
      box-sizing: border-box;
      .spec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 28rpx;
        border-bottom: 1px solid #f5f5f5;
      }
      .address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 14rpx;
        box-sizing: border-box;
        .addinfo {
          display: flex;
          align-items: center;
          width: 70%;
          .info {
            display: flex;
            flex-direction: column;
            // margin-right: 60rpx;
          }
          .address-center {
            width: 100%;
            font-size: 28rpx;
            color: #3d3d3d;
            line-height: 62rpx;

            display: -webkit-box;
            -webkit-line-clamp: 1; /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 超出部分用省略号表示 */
            white-space: normal; /* 允许换行 */
            /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
          }
          .aim {
            width: 15rpx;
            height: 15rpx;
            border-top: 1px solid #b1b0b8;
            border-right: 1px solid #b1b0b8;
            transform: rotate(45deg);
          }
        }
      }
    }
    .bottom {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 750rpx;
      height: 164rpx;
      background: #fff;
      display: flex;
      align-items: center;
      .bottom-left {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 30%;
        .warehouse {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .service {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
      .bottom-right {
        display: flex;
        align-items: center;
        width: 70%;
        button {
          height: 82rpx;
          padding: 0 56rpx !important;
          border-radius: 41rpx;
          line-height: 78rpx;
          font-size: 30rpx;
        }
        .xinyuan {
          background-color: #3d3d3d !important;
          color: $all-color;
        }
        .buy {
          background-color: $all-color !important;
          color: #3d3d3d !important;
          font-weight: 600 !important;
          border: 1rpx solid $all-color !important;
        }
      }
    }
    // 购买弹出框

    .buypopup-content {
      align-items: center;
      justify-content: center;
      padding: 28rpx;
      height: 502rpx;
      background-color: #fff;
      border-radius: 22rpx 22rpx 0 0;
      box-sizing: border-box;
      text-align: center;
      .top {
        display: flex;
        align-items: center;
        .info {
          display: flex;
          flex-direction: column;
          align-items: start;
          margin-left: 20rpx;
          .detail {
            margin-top: 30rpx;
          }
        }
      }
      .center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 46rpx;
        ::v-deep .uni-numbox {
          height: 44rpx !important;
          width: 128rpx;
          border-radius: 22rpx;
          border: 1px solid #eeeeee;
          line-height: 44rpx !important;
        }
        ::v-deep .uni-numbox__minus {
          width: 44rpx !important;
          height: 44rpx !important;
          border: none;
          background-color: #fff;
          border-radius: 22rpx 0 0 22rpx;
          text {
            font-size: 20rpx;
            line-height: 22rpx;
            color: #3d3d3d;
          }
        }
        ::v-deep .uni-numbox__value {
          width: 44rpx !important;
          height: 44rpx !important;
          border: none;
          border-left: 1px solid #eeeeee;
          border-right: 1px solid #eeeeee;
          // background-color: #fff;
          font-size: 20rpx;
          color: #3d3d3d;
        }
        ::v-deep .uni-numbox__plus {
          width: 44rpx !important;
          height: 44rpx !important;
          border: none;
          background-color: #fff;
          border-radius: 0 22rpx 22rpx 0;
          text {
            font-size: 20rpx;
            line-height: 22rpx;
            color: #3d3d3d;
          }
        }
      }
      button {
        height: 82rpx;
        background-color: $all-color;
        margin-top: 11%;
        border-radius: 42rpx;
        font-size: 28rpx;
        line-height: 82rpx;
      }
    }
    .servicepopup-content {
      width: 702rpx;
      height: 906rpx;
      border-radius: 40rpx;
      overflow: hidden;
    }
  }
</style>
